<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="../dist/css/pnotify.custom.min.css" />
		<script type="text/javascript" src="../dist/js/lib/jquery-2.2.1.js" ></script>
		<script type="text/javascript" src="../dist/js/pnotify.custom.min.js" ></script>
		<title>文章列表</title>
	</head>
	<style>
		html,body{
			margin: 0 auto;
			padding: 0;
			font-family: '宋体';
			background: whitesmoke;
		}
		nav{
			display: block; 
			width: 100%; 
			height: 3rem; 
			background: #3367D6;
			line-height: 3rem;
			text-align: center;
			color: white;
			font-weight: bolder;
			position:fixed;
			top: 0;
			z-index: 1000;
		}
		.top_img{
			position: absolute;
			top: 0.5rem;
			right: 0.4rem;
			width: 30px;
			height: 30px;
		}
		.search{
			border-radius: 15px;
			height: 1.6rem;
			width: 50%;
			color: black;
			border: #ffffff;
			background:rgba(f,f,f,0.5);;
			position: relative;
			left: 5%;
			outline:none;
		}
		.index_list{ 
			font-size: 1rem; 	
		  	position: absolute;
			top: 0rem;
			left: 0.4rem;
			}
		a{ display: block; 	text-decoration: none; margin: 10px; border-bottom: 1px dotted blue;}
		.title_list{
			position: relative; 
		    margin-top: 10px;
		    padding-top: 5px;
		    text-align: center;
		    }
	    .span_time{
	    	float: right; font-size: 16px; color: gray; 
	    	}
	    #switch_img{
	    	height: 30%;
	    	margin-top: 3rem;
	    	position: relative;
	    }
	    ul{
	    	float: right;
	    	line-height: 2rem;
	    }
	    ul,li{
	    	padding: 0;
	    	list-style: none;
	    	margin: 0;
	    	padding: 0;
	    }
	    .index{
	    	float: right;
	    }
	    .index li{
	    	width: 10px;
	    	height: 10px;
	    	border-radius: 50%;
	    	background-color: white;
	    	display: inline-flex;
	    }
	.top{	
	position: absolute;
	width: 100%;
	height: 2rem;
	bottom: -1%;
	display: inline-flex;
	background:rgba(0,0,0,0.6);
	z-index: 10000;
	}
 .top_title{ border: none; color: white; width: 70%;height: 1rem; line-height: 1rem;  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
	     /*动画名字， 动画运行的时间，alternate平滑过渡， infinite是反复执行*/
 .imgAnimation{
      animation-name: imgAnimation;
      animation: imgAnimation 2s alternate ;
      -webkit-animation: imgAnimation 2s alternate ;
      -moz-animation: imgAnimation 2s alternate  ;
 }
 #footer{
 	position: fixed;
 	bottom:0;
 	width: 100%;
 	height: 3rem;
 	background: rgba(0,0,0,0.9);
 	z-index: 1000;
 	text-align: center;
 }
 #footer .menu{
 	text-decoration: none;
 	border: white 0px solid ;
 	height: 100%;
 	color: white;
 	display: inline-block;
 	width: 15%;
 	text-align: center;
 	padding: 0;
 	margin: 0;
 	text-align: center;
 	line-height: 3rem;
 }
 .icon-user{
	background-image: url(../dist/img/add.png); /*引入图片图片*/
	background-repeat: no-repeat; /*设置图片不重复*/
	background-position: 0px 0px; /*图片显示的位置*/
	width: 20px; /*设置图片显示的宽*/
	height: 20px; /*图片显示的高*/
}
 /*
  @-webkit-keyframes imgAnimation{
    0%{ left: -198px}
    100%{ left: 50%;}
 }
  @-moz-keyframes imgAnimation{
    0%{ left: -198px}
    100%{ left: 50%;}
 }
 */
 
 @-webkit-keyframes imgAnimation{
    0%{ opacity: 0}
    50%{ opacity: 0.5}
    100%{ opacity: 1}
 }
  @-moz-keyframes imgAnimation{
    0%{ opacity: 0}
    50%{ opacity: 0.5}
    100%{ opacity: 1}
 }
.title_list img{ width:100%; height:auto;  }
#load_more{
	min-height: 1.5rem; 
	line-height: 1.5rem;
	width: 100%; 
	margin: 0 auto; 
	padding: 0; 
	text-align: center; 
	background: gray; 
	font-size: 0.8rem;
	border-radius: 0.5rem;
	color: white;
	margin-top: 1rem;
	margin-bottom: 4rem;}
	.see_times_icon{
		background: url(../dist/img/market_toolbar_unignore_normal.png) no-repeat center; 
		}
	.in_dox_comm{
		background-size: 30px 30px;
		width: 25px;
		height: 25px;
		display: block;
		float: left;
		padding-left: 1rem;
	}
	.praise_times_icon{
		background: url(../dist/img/feed_video_like.png)  no-repeat center;
	}
	.comment_times_icon{
		background: url(../dist/img/recommen_video_comment.png) no-repeat center;
	}
		.in_box{
			display: inline-flex;
			line-height: 25px;
			font-size: 0.6rem;
		}
		.item_title{
			text-align: left;
			display: block;
			font-size: 0.8rem;
			margin-left: 5px;
		}
		.item_time{
			font-size: 0.7rem;
			text-align: left;
			display: block;
			margin: 5px;
		}
		.item{
			margin-top: 5px;
			margin-bottom: 10px;
			padding-top: 6px;
			background: #ffffff;
		}
		.item_a{
			border: 0;
			text-decoration: none;
		}
		.totop{
			text-decoration: none;
			width: 30px;
			height: 30px;
			background: blanchedalmond;
			display: block;
			text-align: center;
			line-height: 30px;
			position: fixed;
			bottom: 3rem;
			right:0.4rem;
			border-radius: 50%;
		}
		.ui_login{
			display: list-item;
			list-style: none;
			margin-top: 1rem;
			margin-right: 1rem;
			height:1.5rem;
			width: 100%;
		}
		.login_div{  padding: 1rem; text-align: center;}
	</style>
	<body id="top" >
		<nav >
			<label class='index_list'>Info</label>
			<img src="../dist/img/sx.png" class="top_img" onclick="refresh()"/>
			<input type="search"  value="关键词" class="search"></input>
		</nav>
		<div id="switch_img" >
			<div class="top" id="nav_go_id" >
				<a class="top_title" id='top_title'></a>
				<ul class="index" id="index_ul">
		     	</ul>
			</div>
		</div>
		<div class="title_list" id='title_list'>
		</div>
		<div id='footer'>
			<a class="menu" id='index' href="#">
				首页
			</a>
			<a class="menu" id='game'>
				游戏
			</a>
			<a class="menu" id='weather'>
				天气
			</a>
			<a class="menu" id='send'>
				发布
			</a>
			<a class="menu" id="login">
				登录
			</a>
		</div>
		<div id="load_more" onclick="loadMore()">
				点击加载更多<b>↓</b>
			</div>
			<p class="totop"  href="#" onclick="goTop()"><b>↑</b></p>
			
	</body>
</html>
<script>
	var locastorage=storagObj();
	
	<!--用户修改-->
	var game=document.getElementById('game');
	var send=document.getElementById('send');
	var login=document.getElementById('login');
	var weather=document.getElementById('weather');
	
	initFoot();
	
	function initFoot(){
		if(locastorage.getItem('user')!= "null"&&
		   locastorage.getItem('user')!= null){
		    login.innerText ="我的"; 
			login.addEventListener('touchstart',function(){
				window.location.href='myinfo.html';
			},false);
		}else{
			login.innerText ="登录";
			login.addEventListener('touchstart',function(){
				loginDialog('myinfo.html');
			},false);
		}
		
		send.addEventListener('touchstart',function(){
				if(locastorage.getItem("user")!="null"&&
					locastorage.getItem('user')!= null){
					window.location.href='index.html';
				}else{
				   //	msg('请先登录','warn');
				    
					loginDialog('index.html');
					
				}
				
		    },false);
		weather.addEventListener('touchstart',function(){
				if(locastorage.getItem("user")!="null"&&
					locastorage.getItem('user')!= null){
					window.location.href='weather.html';
					weather.addEventListener('touchstart',function(){
						window.location.href='weather.html';
					},false);
				}else{
				   //	msg('请先登录','warn');
					loginDialog('weather.html');
					
				}
				
		    },false);
		    
		game.addEventListener('touchstart',function(){
				window.location.href='http://m.7724.com/';
		    },false);
		
	
	}
	
	//  自动居中元素（el = Element）
	function autoCenter(el) {
		var bodyW = document.documentElement.clientWidth;
		var bodyH = document.documentElement.clientHeight;
		var elW = el.offsetWidth;
		var elH = el.offsetHeight;
		el.style.left = (bodyW - elW) / 2 + 'px';
		el.style.top = (bodyH - elH) / 2 + 'px';
	}
	 var  notice=null;
    function loginDialog(url){
    	
    	var html="<div class='login_div'>"+
				"<label class='ui_login'>不需要注册可以直接登录哦</label>"+
				"<input class='ui_login' type='text' id='user_name' name='user_name' placeholder='输入qq号或手机号' maxlength='11'/>"+
				"<input class='ui_login' type='password'  id='user_pass' name='user_pass' placeholder='密码' maxlength='20'/>"+
				"<input class='ui_login' type='button' value='登录' id='loginbtn' />"+
				"<i class='ui_login' style='font-size: 12px;'>登录后下次直接用此账号进行登录</i>"+
			"</div>"
				if(notice==null){
					  notice= new PNotify({
						    title: '登录提醒',
						    text: html,
						    type: 'success',
						     buttons: {
						        closer: false,
						        sticker: false
						    }, 
						    mobile:{
						    	styling:true,
						    	swipe_dismiss:false
						    },
						    delay:100000,
						    remove:false
						  });
				}
    	  $('#loginbtn').click(function(){
    		 var user_phone=  $('#user_name').val()
    		 var user_pass=$('#user_pass').val();
    		  if(user_phone.length==0||user_pass.length==0){
    			  msg('请输入用户名或密码','error');
    			  return;
    		  }
    		 
    		  var param={"user_phone":$('#user_name').val(), "user_pass":$('#user_pass').val(),"action":"login"};
    	    	 $.ajax({  
    			        url: "../login" ,  
    			        type: 'post', 
    			        data:param,
    			        success: function (returndata) {
    			        	
    			            var list=JSON.parse(returndata);
    			        	 if(list[0].code=='10010'){
    			        		  locastorage.setItem('user',JSON.stringify(list[1]));
    			        		  notice.remove();
    			        		  
    			        		  login.innerText ="我的";
    			        		  login.addEventListener('touchstart',function(){
    			      				 window.location.href='myinfo.html';
    			      			   },false);
    			        		 
    			        		  window.location.href=url;
    		                   }else{
    		                	   msg('请输入正确的账号信息','error');
    		                    }
    	                
    	                
    			        },  
    			        error: function (returndata) {  
    			            msg(returndata,'error');
    			        }  
    			    });
    	  });
		//notice.get().click(function() {
		//});
		
    }
    
	var curent_index=0;
	var img_switch=document.getElementById('switch_img');
	var top_title=document.getElementById('top_title');
	var nav_go_id=document.getElementById('nav_go_id');
	
	var down_x=0;
	var out_x=0;
	var page=1;
	var size=10;
	var isfirst=false;
	function setIsFirst(){
		page=1;
	 	if(!page)page=1;
	 	size=parseInt(locastorage.getItem('size')) * parseInt(locastorage.getItem('page'));
		if(!size)size= 10 ;
	}
	
	function storagObj(){
	// Check browser support
	if (typeof(Storage) !== "undefined") {
	    // Store
//	    localStorage.setItem("lastname", "Gates");
	    // Retrieve
//	    alert(localStorage.getItem("lastname"))
        return localStorage;
	} 
}
	var ul=document.getElementById('index_ul');
	var imglist,itemslist;
	
    initSwitch();
    
	
	loadNews();
	
	nav_go_id.addEventListener("touchstart",function(e){
		e.preventDefault();
		goContent()
	},false)
	img_switch.addEventListener("touchstart",function(e){
		e.preventDefault();
	    down_x=e.touches?e.touches[0].clientX:e.clientX
	},false)
	img_switch.addEventListener("touchend",function(e){
		e.preventDefault();
	     out_x=e.touches?event.changedTouches[0].clientX:e.clientX
	     if(down_x-out_x>100){
	       	curent_index++;
	     	 if(curent_index==imglist.length){
	     	 	 curent_index=0
	     	 }
//	     	  console.log("向左滑动"+curent_index);
	     }
	     if(down_x-out_x<-100){
	     		curent_index--;
	     	 if(curent_index<0){
	     	    curent_index=imglist.length
	     	  }
//	     	console.log("向右滑动"+curent_index);
	     }
	     chageImg();
	},false)
	
	function chageImg(){
	    for (var i=0;i<imglist.length;i++) {
			if(i==curent_index){
				img_switch.style.background="url("+imglist[i].index_pic+") no-repeat  center";
				img_switch.style.backgroundSize='100% 100%';
				img_switch.className = "imgAnimation";  
				top_title.innerText=imglist[i].title;
				ul.getElementsByTagName("li")[i].style.background='red';
				top_title.setAttribute('data-info',JSON.stringify(imglist[i]));
				 
			}else{
				ul.getElementsByTagName("li")[i].style.background='#ffffff'
			}
		}
	}
	function initSwitch(){
		var height=0;
		if(window.screen.height>800){
			height=window.screen.height/2;
		}else{
			height=window.screen.height/3;
		}
	  img_switch.style.height=height+"px";
		for (var i=0;i<5;i++) {
			var li=document.createElement('li');
			ul.appendChild(li);
		}
	}
	function autoSwitch(){
		setInterval(function(){
			curent_index++;
			if(curent_index==imglist.length-1)curent_index=0;
			chageImg()
		},5000)
	}
	function loadMore(){
		
		page++
		loadNews(1);
		if(size!=10){
			size=10;
		}
	}
	function refresh(){
		page=1;
		size=10;
		document.getElementById('title_list').innerHTML="";
		loadNews();
		window.AndroidWebView.showInfoFromJs("刷新");
		
	}
	function loadNews(){
		locastorage.setItem('page',page);
		locastorage.setItem('size',size);
		  $.ajax({  
		        url: "../news?action=1&page="+page+"&size="+size ,  
		        type: 'get',  
		        async: false,  
		        cache: true,  
		        contentType: false,  
		        processData: false,  
		        success: function (returndata) {
		        	
		            var list=JSON.parse(returndata);
		        	imglist=list[2];
		        	itemslist=list[1];
		        	if(!isfirst){
		        		isfirst=true;
		        		chageImg();
						autoSwitch();
		        	}
		        	 if(list[1].length==0){
	                    	msg("没有更多数据了",'info');
	                    }else{
	                    	creatItems();
			        	 locastorage.setItem("list",returndata);	
	                    }
//		        	alert(returndata)
                   
                   
		        },  
		        error: function (returndata) {  
		            msg("加载失败",'error');
		        }  
		    });
	}
	
	function showLocalData(){
		var json=locastorage.getItem('list');
		var list=JSON.parse(json);
		if(list[0].code='1009'){
			//console.log('解析成功'+json)
		}
		imglist=list[2];
		chageImg()
		autoSwitch();
		creatItems();
		
	}
	
	function creatItems(){
	
		for (var j=0;j<itemslist.length;j++) {
			
			var div_item=document.createElement('div');
			  div_item.className='item';
			var item_a=document.createElement('a');
			  item_a.className='item_a';
			var label=document.createElement('label');
			  label.className='item_title'
			var i=document.createElement('i');
			  i.className='item_time'
			var img=document.createElement('img');
			var div_item_data_info=document.createElement('div');
			  div_item_data_info.className='item_data_info';
			var in_box_01=document.createElement('div');
			  in_box_01.className='in_box'
			var in_box_02=document.createElement('div');
			  in_box_02.className='in_box'
			var in_box_03=document.createElement('div');
			  in_box_03.className='in_box'
			var span01=document.createElement('span');
			  span01.className='see_times_icon in_dox_comm'
			var span02=document.createElement('span');
			  span02.className='comment_times_icon in_dox_comm'
			var span03=document.createElement('span');
			  span03.className='praise_times_icon in_dox_comm';
			var label01=document.createElement('label');
			var label02=document.createElement('label');
			var label03=document.createElement('label');
			
			label.innerText=itemslist[j].title
			i.innerText=itemslist[j].create_time;
			img.src=itemslist[j].index_pic;
			item_a.setAttribute('data-info',JSON.stringify(itemslist[j]));
			item_a.addEventListener('click',function(){
				
				locastorage.setItem('diteals',this.getAttribute('data-info'));
				if(locastorage.getItem('user')== "null"||
				   locastorage.getItem('user')== null)
				{
					loginDialog("items_diteals.html");
				}else{
					//window.location.href="items_diteals.html"
					window.open('items_diteals.html');
				};
				
				//window.open('items_diteals.html');
			},false)
//			
			
			label01.innerText=itemslist[j].see_count+'人浏览'
			label02.innerText='评论'+itemslist[j].comment_times+'次'
			label03.innerText='点赞'+itemslist[j].click_praise+'次'
			in_box_01.appendChild(span01);
			in_box_01.appendChild(label01);
			in_box_02.appendChild(span02);
			in_box_02.appendChild(label02);
			in_box_03.appendChild(span03);
			in_box_03.appendChild(label03);
			div_item_data_info.appendChild(in_box_01);
			div_item_data_info.appendChild(in_box_02);
			div_item_data_info.appendChild(in_box_03);
			
			div_item.appendChild(item_a);
			item_a.appendChild(label);
			item_a.appendChild(i);
			item_a.appendChild(img);
			item_a.appendChild(div_item_data_info);
			
			document.getElementById('title_list').appendChild(div_item)
		}
		
		
//		<div class="item">
//				 <a class="item_a">
//				 <label class='item_title'>
//				 	这是标题,这是很长的一个标题，你信不信阿达可视电话看挥洒的金卡华盛顿
//				 </label>
//				 <i class='item_time'>2017-03-04 05:00:12</i>
//				<img src="../../build/classes/服务器设置.png"/>
//				 <div id="item_data_info" >
//				 		<div class="in_box"><span class="see_times_icon in_dox_comm"></span> <label >浏览20次</label></div>
//				 		<div class="in_box"><span class="comment_times_icon in_dox_comm"></span> <label>评论20次</label></div>
//				 		<div class="in_box"><span class="praise_times_icon in_dox_comm"></span> <label>点赞20次</label></div>
//				 </div>
//				  </a>
//			</div>

		
	}
	function goContent(){
		locastorage.setItem('diteals',JSON.stringify(imglist[curent_index]));
		       if(locastorage.getItem('user')== "null"||
				   locastorage.getItem('user')== null)
				{
					loginDialog("items_diteals.html");
				}else{
					window.location.href="items_diteals.html"
				};
	}
	function msg(str,tp){
	   
	   var notice= new PNotify({
		    title: '提示信息',
		    text: str,
		    type: tp,
		     buttons: {
		        closer: false,
		        sticker: false
		    }
		});
		setTimeout(function(){
			notice.remove();
		},1000)
		
		return notice;
   }
	 function setCurrent(){
		 console.log(locastorage.getItem('scrollY'))
		//document.body.scrollBy(0,locastorage.getItem('scrollY'));
				$("body").animate({
					  'scrollTop' : "+="+locastorage.getItem('scrollY')+"px"
					}, 1000); 
		
	 }
	  window.onscroll = function(){ 
	 	locastorage.setItem('scrollY',document.body.scrollTop);
    } 
    function goTop(){
		$(document).scrollTop(0); 
	}
    
</script>